/// 水平居左
/// @group 固定样式
.ta-l {
  text-align: left;
}

/// 水平居中
/// @group 固定样式
.ta-c {
  text-align: center;
}

/// 水平居右
/// @group 固定样式
.ta-r {
  text-align: right;
}

/// 隐藏
/// @group 固定样式
.hide {
  display: none;
}

/// 溢出隐藏
/// @group 固定样式
.hidden {
  overflow: hidden;
}

/// 清除浮动
/// @group 固定样式
.clearfix {
  &::after {
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
  }
}

/// 间距样式
///
/// @group 固定样式
/// @example
/// 例：.mt-1 | .pt-1 --> .mt-19 | .pt-19 step 1  (t,r,b,l均包括)
/// .mt-1{ margin-top:1px }
/// 例：.mt-10 | .pt-10 --> .mt-90 | .pt-90 step 10  (t,r,b,l均包括)
/// .mt-10{ margin-top:10px }
// .(m|p)(t|r|b|l)-* {
//   margin-top: *;
// }
@each $dirS, $dir in ("t" "top"), ("r" "right"), ("b" "bottom"), ("l" "left") {
  @for $sort from 0 through 9 {
    @each $mpS, $mp in ("m", "margin"), ("p", "padding") {
      .#{$mpS}#{$dirS}-#{$sort*2 + 1} {
        #{$mp}-#{$dir}: $sort * 2+1 + px;
      }

      .#{$mpS}#{$dirS}-#{$sort*2} {
        #{$mp}-#{$dir}: $sort * 2 + px;
      }

      .#{$mpS}#{$dirS}-#{$sort*10} {
        #{$mp}-#{$dir}: $sort * 10 + px;
      }
    }
  }
}

/// 字体大小样式
///
/// @group 固定样式
/// @example
/// 例：fz-1 --> fz-30 step 1
/// .fz-1{ font-size:1px }
// .fz-* {
//   font-size: *px;
// }
@for $sort from 1 through 30 {
  .fz-#{$sort} {
    font-size: $sort + px;
  }
}

/// 透明度
///
/// @group 固定样式
/// @example
/// 例：.opc-1 --> .opc-10 step 1
/// .opc-1{ opacity: .1 }
// .opc-* {
//   opacity: * / 10
// }
@for $sort from 1 through 10 {
  .opc-#{$sort} {
    opacity: $sort / 10;
  }
}

/// 字体粗细
///
/// @group 固定样式
/// @example
/// 例：.fw-1 --> .fw-10 step 1
/// .fw-1{ font-weight: 100; }
// .fw-*{
//    font-weight: * * 100;
// }
@for $sort from 1 through 10 {
  .fw-#{$sort} {
    font-weight: $sort * 100;
  }
}

/// 圆角
///
/// @group 固定样式
/// @example
/// 例：.br-1 --> .br-10 step 1
/// .br-1{ border-radius: 1px; }
// .br-*{
//    border-radius: * + px;
// }
@for $sort from 1 through 10 {
  .br-#{$sort} {
    border-radius: $sort + px;
  }
}

/// 字体间距
///
/// @group 固定样式
/// @example
/// 例：.lt-sp-1 --> .lt-sp-10 step 1
/// .lt-sp-1{ letter-spacing: 1px; }
// .lt-sp-*{
//    letter-spacing: * + px;
// }
@for $sort from 1 through 10 {
  .lt-sp-#{$sort} {
    letter-spacing: $sort + px;
  }
}
